<template>
    <div class="navbar-container" style="background-color: #ccc;">
      <el-menu class="el-menu-demo" mode="horizontal">
        <el-menu-item index="1">
          <img src="../assets/logo.png" alt="Logo" class="logo" @click="goHomepage">
        </el-menu-item>
        <el-menu-item index="2" @click="goUserPackage">业务中心</el-menu-item>
        <el-menu-item index="3" @click="goHomeUserService">服务中心</el-menu-item>
        <el-menu-item index="4" @click="goPersonalCenter">个人中心</el-menu-item>
        <el-menu-item index="5">
          <img src="../assets/avatar.jpg" alt="Logo" class="logo" @click="goPersonalCenter">
        </el-menu-item>
      </el-menu>
    </div>
  </template>
  
  <script>
  
  export default {
    data() {
      return {
  
      };
    },
    methods: {
      goHomepage(){
        this.$router.push('/homepage');
      },
      goLogin(){
        this.$router.push('/login');
      },
      goHomeUserService(){
        this.$router.push('/homeUserService')
      },
      goPersonalCenter(){
        this.$router.push('/personalCenter');
      },
      goUserPackage(){
        this.$router.push('/userPackage'); 
      },
      goPersonalOrder(){
        
      },
    }
  }
  </script>
  
<style>
  .navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* 确保导航栏宽度占满整个屏幕 */
    position: fixed;
    top: 0;
    z-index: 1000;
    background-color: #ccc; /* 导航栏背景颜色 */
  }
  
  .el-menu-demo {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  
  .logo {
    height: 40px;
    margin-right: 10px;
  }
  
  .logo-text {
    font-size: 20px;
    font-weight: bold;
  }
  
  .barAvatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
  }
</style>